{{extend name="layout/base-html"}}

{{block name="body"}}
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="title" class="layui-form-label"><span class="x-red">*</span>名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="title" name="title" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{{$data.title|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>文章分类</label>

                <div class="layui-input-block">
                    <div id="article-cate" class="xm-form-select"></div>
                </div>
            </div>

            <div class="layui-form-item message-content">
                <label class="layui-form-label"><span class="x-red">*</span>文章详情</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="description" id="message-box" class="layui-textarea">{{$data.description|default=''}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>

                <button class="layui-btn" lay-filter="{{$data ? 'edit' : 'add'}}" lay-submit="">
                    {{$data ? '修改' : '增加'}}
                </button>
            </div>
        </form>
    </div>
</div>

<script type="module">
    import {update, save} from "/static/admin/js/api/additional/articles.js";
    import {rain} from "/static/admin/js/app.js";
    import {config as tinyConfig} from "/static/admin/js/extends/tinyMce.js";

    xmSelect.render({
        ...rain.config.xmSelect,

        el: "#article-cate",
        name: "classify_id",
        initValue: ['{{$data.classify_id|default=0}}'],
        layVerify: 'required',
        radio: true,
        clickClose: true,
        model: {
            label: {
                type: 'text',
                text: {
                    //左边拼接的字符
                    left: '',
                    //右边拼接的字符
                    right: '',
                    //中间的分隔符
                    separator: ', ',
                },
            }
        },
        data: JSON.parse('{{$cate|raw}}')
    });

    // 初始化富文本
    tinymce.init({
        ...tinyConfig.config,

        selector: '#message-box', //容器，可使用css选择器
    });

    layui.use(['form'], () => {
        let $ = layui.jquery,
            form = layui.form;

        let event = '{{$data ? "edit" : "add"}}';

        // 监听事件
        formData(form, event, 'edit' === event ? {
            request: update,
            id: '{{$data.id|default=0}}',
        } : {
            request: save,
        }, false, data => {
            data.field.description = tinymce.get('message-box').getContent();
        });
    });
</script>
{{/block}}
